<template>
  <div class="main-div">
    <Row >
      <Spin v-show="isSpinShow" fix size="large" />


      <el-tabs v-model="activeName" >
        <el-tab-pane label="基本信息" name="form">
          <Card>
            <div slot="title">
              <div>

                <Button
                  type="primary"
                  style="margin-right: 15px;"
                  @click="action('approvalHistory')"
                >审批意见
                </Button>
                <Button
                  type="primary"
                  style="margin-right: 15px;"
                  @click="action('flowImage')"
                >流程图
                </Button>
                <Button
                  type="primary"
                  style="margin-right: 15px;"
                  @click="action('print')"
                >打印
                </Button>
              </div>

            </div>
            <div v-if="jsonData.config!=null" class="container"  style=" overflow: auto;max-height: 550px">

              <fm-generate-form
                ref="generateForm"
                :data="jsonData"
                :remote="remoteFuncs"
                :value="editData"
                :remote-option="dynamicData"
                :taskId="processInstanceId"
              />

            </div>
          </Card>
        </el-tab-pane>
        <el-tab-pane label="附件" name="attachment">
          <div class="block" style="margin-left: 15px">
            <el-timeline>
              <el-timeline-item color="#0bbd87" v-for="(item,index) in bpmTaskAttachment " :timestamp="item.createTime" placement="top">
                <el-card>
                  <h4>变更人:{{item.createBy}}</h4>
                  <p> 变更内容: {{item.changeContent}}</p>
                  <p v-for="(item1,index1) in item.bpmTaskAttachmentDetailedList">
                    <el-link type="info" :href="item1.url" target="_blank">{{item1.name}}</el-link>
                  </p>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-tab-pane>
      </el-tabs>






    </Row>
    <Modal
      :mask-closable="false"
      v-model="opinion.show"
      title="意见"
      width="85%"
      :transfer="false"
    >
      <Table
        ref="selection"
        :loading="opinion.loading"
        highlight-row
        height="450"
        :columns="opinion.tableColumns"
        :data="opinion.tableData"
        style="padding-left: 10px;padding-top: 10px"
      />
      <div slot="footer" />
    </Modal>
    <Modal
      :mask-closable="false"
      v-model="flowImage.show"
      title="流程图"
      width="85%"
      :transfer="false"
    >
      <iframe
        id="flowImageframe"
        width="100%"
        style="min-height: 600px"
        height="100%"
        frameborder="0"
        align="center"
        allowfullscreen="true"
        allow="autoplay"
        :src="flowImage.src"
      />
      <div slot="footer" />
    </Modal>
  </div>

</template>

<script>
  import { renderHisForm } from '@/api/analy'
  import {
    opinionTask
  } from '@/api/action'
  import {
    getBpmTaskAttachmentByProcessInstanceId
  } from '@/api/analy'
  export default {
    name: 'Task',
    components: {
    },

    data() {
      return {
        activeName: 'form',
        fileList: [],
        bpmTaskAttachment: [],
        attachmentForm: {
          createBy: '',
          id: '',
          createTime: '',
          procDefId: '',
          taskId: '',
          processInstanceId: '',
          changeContent: '',
          modelKey: '',
          file: [],
        },
        flowImage:
          {
            show: false,
            src: '',
            base: process.env.VUE_APP_BASE_BPM_API + '/view/tab.html?fireHoverAction=true&table=true' + '&instId='
          },
        jsonData: {},
        editData: {},
        remoteFuncs: {},
        dynamicData: {},
        processInstanceId: '',
        isSpinShow: true,
        fromIndex: false,
        opinion:
          {
            show: false,
            loading: true,
            tableColumns: [
              {
                title: '任务名称',
                key: 'nodeName'
              },
              {
                title: '创建时间',
                key: 'createTime'
              },
              {
                title: '审批时间',
                key: 'completeTime'
              },
              {
                title: '执行人',
                render: (h, params) => {
                  var html = '-'
                  var node = this.opinion.tableData[params.index]
                  if (node.a1FlowTaskTrajectoryEntity) {
                    html = node.a1FlowTaskTrajectoryEntity.userName
                  } else {
                    html = node.auditor
                  }
                  if(!html){
                    if(node.identityLinks){
                      html=node.identityLinks
                    }

                  }
                  return h('span', html)
                }
              },
              {
                title: '任务标题',
                render: (h, params) => {
                  var html = '-'
                  var node = this.opinion.tableData[params.index]
                  html = node.a1FlowTaskTrajectoryEntity.title
                  return h('span', html)
                }
              },
              {
                title: '备注/意见',
                render: (h, params) => {
                  var html = '-'
                  var node = this.opinion.tableData[params.index]
                  html = node.a1FlowTaskTrajectoryEntity.opinion
                  return h('span', html)
                }
              },
              {
                title: '状态说明',
                render: (h, params) => {
                  var html = '-'
                  var node = this.opinion.tableData[params.index]
                  html = node.a1FlowTaskTrajectoryEntity.statusVal
                  return h('span', html)
                }
              }

            ],
            tableData: []
          }
      }
    },
    mount() {
      this.getData()
    },
    created() {

      var query = this.$route.query
      if ( query.processInstanceId) {
        this.processInstanceId = query.processInstanceId
      }else{
        if(this.pid){
          this.processInstanceId = this.pid

        }
      }
      this.renderHisForm();
      this.getBpmTaskAttachmentByProcessInstanceId(this.processInstanceId );

    },
    props: {
      pid: {
        type: String,
        default: ""
      }
    },
    watch: {
      pid() {
        if (this.pid){
          this.processInstanceId = this.pid
          this.fromIndex=true;
          this.renderHisForm();
        } else{
          this.jsonData={}
          this.editData={}
          this.fromIndex=false;


        }

      }
    },
    methods: {
      getBpmTaskAttachmentByProcessInstanceId: function (id) {
        try {
          getBpmTaskAttachmentByProcessInstanceId(id).then((response) => {
            if (response.code == 0) {
              var data = response.data;
              this.bpmTaskAttachment = data;
              if (response.bpmTaskAttachment) {
                this.attachmentForm.id=response.bpmTaskAttachment.id;
                this.attachmentForm.createBy=response.bpmTaskAttachment.createBy
                this.attachmentForm.createTime=response.bpmTaskAttachment.createTime
                this.attachmentForm.procDefId=response.bpmTaskAttachment.procDefId
                this.attachmentForm.changeContent=response.bpmTaskAttachment.changeContent
                this.attachmentForm.taskId=response.bpmTaskAttachment.taskId
                this.attachmentForm.processInstanceId=response.bpmTaskAttachment.processInstanceId
                this.fileList=response.bpmTaskAttachment.bpmTaskAttachmentDetailedList
              }
            } else {
            }
          })
        } catch (e) {

        }
      },
      renderHisForm:function(){
        renderHisForm(this.processInstanceId).then((response) => {
          if (response.data){
            this.jsonData = JSON.parse(response.data)
          }
          if (response.editData){
            this.editData = JSON.parse(response.editData)
          }


          this.isSpinShow = false
        })
      },
      action: function(action) {
        if (typeof action === 'object') {
          this.alias = action.alias
        } else {
          this.alias = action
        }

        switch (this.alias) {
          case 'approvalHistory':
            this.opinionAction()
            break
          case 'flowImage':
            this.flowImageAction()
            break
          case 'print':

            window.print()
            break
          default:
        }
      },
      flowImageAction: function() {
        this.flowImage.src = this.flowImage.base + this.processInstanceId + '&t=' + new Date().getTime()
        this.flowImage.show = true
      },
      opinionAction: function() {
        this.opinion.show = true
        try {
          opinionTask(this.processInstanceId).then((response) => {
            if (response.code == 0) {
              this.opinion.loading = false
              this.opinion.tableData = response.data
            }
          })

        }finally {
          this.opinion.loading = false

        }

      },
      details: function(e) {
        // "taskId":data.id
        this.$router.push({ name: 'handleHisTaskDetails', query: { t: new Date().getTime() }})
      }

    }

  }

</script>
<style lang="scss" scoped>
  .task-card {
    margin-top: 10px;
  }

  .container {
    height: auto !important;
    min-height: 450px;
  }

</style>
